<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
	   <script>
	     
	    </script>
	    
	    
	    <div style="position:relative">
	        <img src="images/wheel_wrap.png" width="100%" />
	        <img style="transition:all 3s;position:absolute;left:50%;top:50%;margin-left:-42%;margin-top:-43%"
	             src="images/564fff53N974e6518.png" width="84%" id="pan" />
	        <img style="position:absolute;left:50%;top:50%;margin-left:-15%;margin-top:-18%"
	             src="images/wheel_center.png" width="30%" id="luckyBtn" />
	    </div>
	    
	    <script>
	        var arr = [3600,3645,3690,3735,3780,3825,3870,3915,3645,3645,3645,3645,3645,3645,3645,3645,3645,3645]
	        luckyBtn.onclick = function(){
	            var luckyDeg = arr[Math.floor(Math.random()*arr.length)];
	            pan.style.transform = "rotate("+luckyDeg+"deg)";
	        };
	    </script>
	</body>

</html>
